<template>
    <div class="bigbox">
        <div class="box1"><router-link to="/mine" href=""></router-link><span>订单列表</span></div>
        <!-- 内容 -->
    <div class="cont">
    <nav>
    <div class="nav " id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">全部</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">待付款</a>
    <a class="nav-item nav-link" id="nav-contact-tab1" data-toggle="tab" href="#nav-contact1" role="tab" aria-controls="nav-contact" aria-selected="false">待发货</a>
    <a class="nav-item nav-link" id="nav-contact-tab2" data-toggle="tab" href="#nav-contact2" role="tab" aria-controls="nav-contact" aria-selected="false">已发货</a>
    <a class="nav-item nav-link" id="nav-contact-tab3" data-toggle="tab" href="#nav-contact3" role="tab" aria-controls="nav-contact" aria-selected="false">售后</a>
    </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <!-- 全部 -->
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        1
    <!-- <ul>
      <li v-for="(item,index) in qb" :key='index'>
        <div>
          <img :src="item.src1" alt="" width="100%">
          <div>
            <p>{{item.p}}</p>
              <p><span>{{item.span}}</span><span><img src="../../public/img/gwc1.png" alt=""></span></p>
          </div>
        </div>
      </li>
    </ul> -->
  </div>
    <!-- 待付款 -->
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    2
    
    </div>
    <!-- 待发货 -->
    <div class="tab-pane fade" id="nav-contact1" role="tabpanel" aria-labelledby="nav-contact-tab">
        3
    </div>
    <!-- 已发货 -->
    <div class="tab-pane fade" id="nav-contact2" role="tabpanel" aria-labelledby="nav-contact-tab">
        4
    </div>
    <!-- 售后 -->
    <div class="tab-pane fade" id="nav-contact3" role="tabpanel" aria-labelledby="nav-contact-tab">
        5
    </div>

    </div>

    </div>
    </div>
</template>

<style lang="less" scoped>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
    }
    .box1 {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  font-size: 14px;
  text-align: center;
  line-height: 53px;
  border-bottom: 1px solid #d8d8d8;
  /*position: relative;*/
  background: #ffffff;;
  span {
    color: #000000;
  }
  a {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: url("../../public/img/arrow-left.png") no-repeat center center;
    background-size: 50%;
  }
}
//内容
.cont{
    margin-top: 50px;
}
.nav{
  justify-content: space-around;
  align-items: center;
  height: 50px;
  font-size: 14px;
  background-color: white;
//   border-radius: 50px;
  box-shadow: 2px 2px 5px #a09b9b;
  a{
      color: #000000;
  }
}
//
.active{
color:#cc0000 !important;
}
.nav-link{
  padding: 0.3rem 0 0.3rem 0;
}
// 商品
.tab-pane{
  padding: 0.3rem;
  margin-bottom: 0.3rem;
}

</style>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      
    }
  },
  mounted() {
    
  },
  computed: {
    
  },
  methods: {

  },
};
</script>